<script setup>

import {ref ,watch} from 'vue'
const deep=ref(320)
const limit=ref(330)

const fontvalue=ref('')

const isfont=ref(false)

const h=ref(40)

watch(deep,(newnum,oldnum)=>{
  console.log(newnum,oldnum);
  if(newnum>=limit.value){

      // fontvalue.value="font"
    isfont.value=true
  }
    if(newnum<limit.value){
      // fontvalue.value=""
      isfont.value=false

  }
    if(newnum>=limit.value+10){
      deep.value=320
    }
})


</script>

<template>
<h2>侦听器（Watch）</h2>
  <p>
    <button @click="deep++">下雨</button><button @click="deep--">人工泄洪</button>
  </p>
  <div class="daba">
    <div class="deep" v-bind:style="[{height:deep+'px'},{border:'1px solid red'}]">
<!--      <span :class="fontvalue">-->
      <span class="spanbgc" :class="[{font:isfont},'border']">
    水位 {{deep}}
      </span>
    </div>
  </div>



</template>

<style scoped>
.daba{
  width:400px;
  height: 400px;
  background-color: lightblue;
  position: relative;
}
.deep{
  width:400px;
  background-color: darkgreen;
  position:absolute;
  bottom:0px;
}

.font{
  font-size:30px;
  color:red;
}
.spanbgc{
  background-color: lightpink;
}

.border{
  border: 3px solid black;
  display: block;
}

</style>